<template>
  <div class="content">
    <heading grade="1">我的培训</heading>
    <div class="my-train">
      <ul>
        <li v-for="item in list" class="divider">
          <div class="train-img">
            <img alt="" :src="item.imgUrl">
          </div>
          <div class="train-con">
            <dl class="train-info">
              <dt><a href="">{{item.title}}</a></dt>
              <dd class="small">{{item.time}}</dd>
            </dl>
            <div class="train-btn">
              <a v-bind:href="'#/train/edit/'+item.id+'/'+item.period">
                <el-button size="small" class="mod-default">修改信息</el-button>
              </a>
              <!--<el-button size="small" @click="ajaxlis">打印接口数据</el-button>-->
              <a v-bind:href="'#/train/manage/'+item.id+'/'+item.period">
                <el-button size="small" class="mod-default">学员管理</el-button>
              </a>
              <el-button size="small" v-if="item.status == 2" @click="open2" class="mod-default">关闭报名
              </el-button>
            </div>
          </div>
          <div class="train-operating">
            <div class="train-status">
              <el-button type="primary" v-if="item.status==1" :data-status="item.status">审核中</el-button>
              <el-button type="primary" v-if="item.status==2" :data-status="item.status">通过审核</el-button>
              <el-button type="primary" v-if="item.status==3" :data-status="item.status">未通过</el-button>
              <el-button type="primary" v-if="item.status==4" :data-status="item.status">报名中</el-button>
              <el-button type="primary" v-if="item.status==5" :data-status="item.status">进行中</el-button>
              <el-button type="primary" v-if="item.status==6" :data-status="item.status">已结束</el-button>
              <el-button type="primary" v-if="item.status==7" :data-status="item.status">报名截止</el-button>
              
              <!--<span v-if="item.status == 1" class="status-btn status-btn-info">报名中</span>-->
              <!--<span v-if="item.status == 2" class="status-btn status-btn-success">进行中</span>-->
              <!--<span v-if="item.status == 3" class="status-btn status-btn-warning">失败</span>-->
              <!--<span v-if="item.status == 4" class="status-btn status-btn-end">关闭</span>-->
              <!--<span v-if="item.status == 5" class="status-btn status-btn-end">结束</span>-->
            </div>
            <p class="number-people weak small">{{item.baoMinNum}}人已报名</p>
          </div>
        </li>
      </ul>
      <div class="train-page">
        <!--<my-component></my-component>-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  
  var Child = {
    template: '<div>我只是暂时的显示的模板</div>'
  }
  export default {
    components: {
      'my-component': Child
    },
    mounted () {
      console.log(this.$route, 1111)
    },
    data () {
      return {
        list: [
          {
            id: 321,
            imgUrl: '/static/images/trainImg.png',
            title: '绿茵之星青少年足球培训',
            time: '2017-06-20 - 2017-09-21',
            baoMinNum: '5',
            status: 1,
            period: 1
          },
          {
            id: 987,
            imgUrl: '/static/images/trainImg.png',
            title: '绿茵之星青少年足球培训',
            time: '2017-06-20 - 2017-09-21',
            baoMinNum: '6',
            status: 2,
            period: 1
          },
          {
            id: 245,
            imgUrl: '/static/images/trainImg.png',
            title: '绿茵之星青少年足球培训',
            time: '2017-06-20 - 2017-09-21',
            baoMinNum: '6',
            status: 3,
            period: 1
          },
          {
            id: 236,
            imgUrl: '/static/images/trainImg.png',
            title: '绿茵之星青少年足球培训',
            time: '2017-06-20 - 2017-09-21',
            baoMinNum: '6',
            status: 4,
            period: 1
          },
          {
            id: 581,
            imgUrl: '/static/images/trainImg.png',
            title: '绿茵之星青少年足球培训',
            time: '2017-06-20 - 2017-09-21',
            baoMinNum: '6',
            status: 5,
            period: 2
          }
        ]
      }
    },
    methods: {
      open2 () {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      go (obj) {
        this.$router.push({name: obj})
      },
      ajaxlis () {
        this.$axios.post('https://bird.ioliu.cn/joke/?type=text').then(function (response) {
          console.log(response)
        }).catch(function (error) {
          console.log(error)
        })
      }
    },
    computed: {
      computed_now: function () {
        return Date.now()
      }
    }
  }
</script>
<style scoped rel="stylesheet/scss" lang="scss">
  @import '~styles/index.scss';
  
  .my-train {
    overflow: hidden;
    .train-status{
      .el-button {
          border: 0;
          &[data-status='7'],
          &[data-status='6'] {
              background: #bbbbbb;
          }
          &[data-status='2'] {
              background: #89d034
          }
          &[data-status='3'] {
              background: #fd6f01
          }
      }
    }
  
  li {
    clear: both;
    overflow: hidden;
    padding: 30px 0px 20px;

  &:hover {
    background: #fafafa;
  }
  
  }
  .train-img,
  .train-con {
    float: left;
  }
  
  .train-img {
    width: 160px;
    height: 120px;
    margin-right: 30px;
  
  img {
    width: 100%;
    height: 100%;
  }
  
  }
  .train-con {
  
  .train-btn {
    margin-top: 20px;
  
  .el-button {
    margin-right: 15px;
  }
  
  }
  .train-info {
  dt {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
  a {
    color: #333;
    font-size: 18px;
    text-decoration: none;
  &
  :hover {
    text-decoration: underline;
    color: $primary-color;
  }
  
  }
  }
  dd {
    line-height: 25px;
  }
  
  }
  }
  .train-operating {
    float: right;
    text-align: center;
  
  .number-people {
    line-height: 30px;
  }
  
  }
  .train-page {
    text-align: center;
    margin-top: 30px;
  }
  
  }

</style>
